@function vw($px) {
    @return $px/750*100vw
};
// 头部布局样式
header {
    width: vw(750);
    // 头部占位容器
    .hd-placeholder {
        width: vw(750);
        height: vw(150);
    }
    .top {
        width: vw(750);
        height: vw(150);
        line-height: vw(126);
        padding: vw(12) vw(20);
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        background: #fff;
    }
}
// 搜索框
.search {
    width: vw(280);
    height: vw(55);
    line-height: vw(55);
    border: vw(4) solid rgb(255, 147, 68);
    border-radius: vw(27.5);
    display: flex;
    justify-content: center;
    align-items: center;
    form {
        input {
            font-size: vw(25);
            border: none;
            width: vw(200);
            height: vw(40);
            vertical-align: middle;
        }
    }
    button {
        background: #fff;
        img {
            width: vw(40);
            height: vw(35);
        }
    }
}
// 城市选择框
.city {
    position: relative;
    select {
        width: vw(165);
        height: vw(60);
        border: vw(4) solid rgb(255, 147, 68);
        font-size: vw(25);
        padding: vw(10) vw(15);
        vertical-align: middle;
        /*很关键：将默认的select选择框样式清除*/
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;
        /*在选择框的最右侧中间显示小箭头图片*/
        background: url("../image/index/城市切换下拉.png") no-repeat ;
        background-size: vw(32) vw(16);
        background-position: vw(115) vw(22);
    }
}
// 更多导航栏
.more {
    width: vw(710);
    height: vw(55);
    margin: vw(30) auto 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
        display: flex;
        img {
            width: vw(55);
            height: vw(55);
        }
        a {
            h2 {
                font-size: vw(30);
                font-weight: normal;
                line-height: vw(55);
                margin-left: vw(8);
                color: black;
            }
        }
    }
    .right {
        a {
            font-size: vw(25);
            line-height: vw(25);
            display: flex;
            align-items: center;
            color: black;
            img {
                width: vw(25);
                height: vw(25);
                margin-left: vw(8);
            }
        }
    }
    div a:hover {
        color: blue;
    }
}
// 页脚导航栏
footer {
    width: vw(750);
    // 页脚导航栏占位
    .ft-placeholder {
        width: vw(750);
        height: vw(126);
    }
    .nav {
        width: vw(750);
        height: vw(126);
        padding: vw(12) vw(20);
        display: flex;
        background: #fff;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        bottom: 0;
        a {
            width: vw(75);
            // height: vw(115);
            display: flex;
            flex-direction: column;
            align-items: center;
            img {
                width: vw(68);
                height: vw(68);
            }
            span {
                font-size: vw(26);
                color: rgb(0, 0, 0);
                &:hover {
                    color: rgb(255, 147, 68);
                }
            }
        }
    }
}
// 首页商店背景图片
@mixin shop-bg {
    display: inline-block;
    width: vw(210);
    height: vw(165);
}
@mixin display-fx {
    display: flex;
    justify-content: space-between;
}
// 背景图的大小和定位
@mixin bg-szpt {
    background-size: cover;
    background-position: center;
}